<template>
    <div class="app-container">
        <el-row class="wrapper use">
            <el-col :span="24" class="warp-main">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>前置条件</p>
                    <!--工具条-->
                    <el-form :inline="true" :model="filters" style="padding-top:10px">
                        <el-form-item label="团队">
                            <el-select @change="teamChange" v-model="teamSelectId" placeholder="平台团队">
                                <el-option v-for="item in teams" :key="item.id" :label="item.nameCn" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="团队空间">
                            <el-select @change="nsChange" v-model="namespaceSelectId" placeholder="空间">
                                <el-option v-for="item in namespaces" :key="item.kubeName" :label="item.name" :value="item.kubeName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="应用">
                            <el-select @change="appChange" v-model="appSelectId" placeholder="应用">
                                <el-option v-for="item in apps" :key="item.id" :label="item.appName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="24" class="warp-main">
                <div class="el-bar el-bottom">
                    <!--查询结果-->
                    <template>
                        <!--应用日志组件.start-->
                        <appLog :namespaceName="namespaceName" :podNames="podNames">
                        </appLog>
                        <!--应用日志组件.end-->
                    </template>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import appLog from '@/components/logCenter/appLog';
export default {
    components: { appLog },
    data() {
        return {
            namespaceName: "",
            podNames: [],
            filters: {
                name: ''
            },
            teamSelectId: '',
            teams: [],
            namespaceSelectId: '',
            namespaces: [],
            appSelectId: '',
            apps: [],
        }
    },
    mounted: function() {
        let _this = this;
        //查询团队列表
        this.queryTeam();
    },
    methods: {
        //查询团队
        queryTeam() {
            let url = this.projectConfig.URL_API_TEAM1;
            var userId = this.userBaseInfo.getUserId();
            var isSuperAdmin = this.userBaseInfo.getIsSuperAdmin();
            url += "?currentUserId=" + userId + "&superAdmin=" + isSuperAdmin;
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                this.teams = d;
            })
        },
        //查询命名空间
        queryNs(teamId) {
            let url = this.projectConfig.URL_API_TEAM_NAMESPACE1;
            var userId = this.userBaseInfo.getUserId();
            var isSuperAdmin = this.userBaseInfo.getIsSuperAdmin();
            url = this.httpClient.urlParmHandle(url, [teamId]);
            url += "?currentUserId=" + userId + "&superAdmin=" + isSuperAdmin;
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                this.namespaces = d;
            })
        },
        //查询应用
        queryApp(ns) {
            let url = this.projectConfig.URL_API_APP_MANAGE_QUERY;
            url += "?page=1&pageSize=100&queryKey=&queryStatus=all&namespace=" + ns;
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                this.apps = d.items;
            })
        },
        //应用实例查询
        queryAppPod(ns, appId) {
            let url = this.projectConfig.URL_API_APP_MANAGE_GET_POD_LIST;
            url += "/" + ns + "/" + appId;
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                let pns = [];
                d.forEach(function(element) {
                    pns.push(element.appNameKube);
                }, this);
                this.podNames = pns;
                this.namespaceName = ns;
            })
        },
        teamChange: function(value) {
            this.namespaceSelectId = '';
            this.namespaces = [];
            this.appSelectId = '';
            this.apps = [];
            this.namespaceName = '';
            this.podNames = [];
            this.queryNs(value);
        },
        nsChange: function(value) {
            this.appSelectId = '';
            this.apps = [];
            this.namespaceName = '';
            this.podNames = [];
            this.queryApp(value);
        },
        appChange: function(value) {
            this.queryAppPod(this.namespaceSelectId, value);
        }
    }
}
</script>

<style>
.use .el-table tr {
    text-align: center;
}


.use .el-bottom {
    padding-bottom: 50px;
    margin-top: 10px;
}


.use .el-bar .nbd {
    border-bottom: none;
}

.use .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}


.use .el-table .cell {
    padding: 0;
}
</style>